<!-- 会议投票 -->
<template>
  <app-page card full>
    <template #header>会议投票</template>
    <app-page-main>
      <template #header>
        <div class="app-query">
          <el-form
            :inline="true"
            :model="pageData.query"
            @submit.prevent="pageActions.handleSearch"
            @keyup.enter="pageActions.handleSearch"
          >
            <el-form-item label="标题名称">
              <el-input v-model="pageData.query.roomNo" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="投票时间" style="width: 500px">
              <DatePicker v-model:start="pageData.query.startTime" v-model:end="pageData.query.endTime" />
            </el-form-item>
            <el-form-item label="会议状态">
              <el-select
                v-model="pageData.query.status"
                clearable
                :value-on-clear="() => null"
                :empty-values="[null]"
              >
                <el-option label="全部" value="" />
                <el-option label="待开始" value="0" />
                <el-option label="进行中" value="1" />
                <el-option label="已完成" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否复选">
              <el-select
                v-model="pageData.query.isMulti"
                clearable
                :value-on-clear="() => null"
                :empty-values="[null]"
              >
                <el-option label="全部" value="" />
                <el-option label="是" value="true" />
                <el-option label="否" value="false" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="search" @click="pageActions.handleSearch">搜索</el-button>
              <el-button icon="refresh" @click="pageActions.handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="app-action">
          <el-button
            type="primary"
            plain
            icon="plus"
            @click="
              $router.push({
                path: `${$route.path}/edit`,
                query: { rootPath: `${$route.query.rootPath}`, meetId: `${$route.query.id}` },
              })
            "
          >
            添加
          </el-button>
        </div>
      </template>

      <el-table v-loading="pageData.loading" :data="pageData.data">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column
          prop="title"
          label="标题名称"
          :show-overflow-tooltip="{ popperClass: 'app-table-tooltip' }"
        />
        <el-table-column label="参与投票人数">
          <template #default="{ row }">
            {{ row.users.length }}
          </template>
        </el-table-column>
        <el-table-column label="投票类型">
          <template #default="{ row }">
            {{ row.type === 1 ? '多主题' : '单主题' }}
          </template>
        </el-table-column>
        <el-table-column label="大屏链接">
          <template #default="{ row }">
            <el-link type="primary" @click="copyLink($event, row)">大屏链接</el-link>
          </template>
        </el-table-column>
        <el-table-column label="投票结果">
          <template #default="{ row }">
            <el-link
              type="primary"
              :disabled="row.status === 0"
              @click="
                $router.push({
                  path: `${$route.path}/count`,
                  query: { id: row.id, roomId: $route.query.roomId, rootPath: `${$route.query.rootPath}`, type: row.type },
                })
              "
            >
              查看结果
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="是否复选">
          <template #default="{ row }">{{ row.isMulti ? '是' : '否' }}</template>
        </el-table-column>
        <el-table-column label="投票状态">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'warning' : row.status === 2 ? 'success' : 'info'">
              {{ row.statusDesc }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="投票时间" :show-overflow-tooltip="{ popperClass: 'app-table-tooltip' }">
          <template #default="{ row }">
            <span v-if="row.startTime && row.endTime">{{ row.startTime }} - {{ row.endTime }}</span>
            <span v-else>/</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260">
          <template #default="{ row }">
            <el-button
              link
              type="primary"
              icon="edit"
              :disabled="row.status !== 0"
              @click="
                $router.push({
                  path: `${$route.path}/edit`,
                  query: { id: row.id, rootPath: `${$route.query.rootPath}`, meetId: row.meetId },
                })
              "
            >
              编辑
            </el-button>
            <el-button
              link
              type="primary"
              icon="delete"
              @click="pageActions.handleDelete(row)"
              :disabled="row.status !== 0"
            >
              删除
            </el-button>
            <el-button link type="primary" icon="stamp" @click="handleVote(row)" v-if="row.status === 0">
              开始投票
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <template #footer>
      <div class="app-toolbar" v-if="$route.query.id">
        <el-button @click="$router.go(-1)">返回</el-button>
      </div>
      <el-pagination
        @size-change="pageActions.handleSizeChange"
        @current-change="pageActions.handlePageChange"
        :current-page="pageData.page"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      />
    </template>
  </app-page>
</template>

<script setup>
import { usePageList, http } from 'jax-node'
import DatePicker from '@/components/form/DatePicker.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Clipboard from 'clipboard'

const route = useRoute()
const { pageData, pageActions } = usePageList({
  api: 'meet/vote',
  query: {
    meetId: route.query.id,
    isMulti: '',
    status: '',
  },
})

const handleVote = row => {
  ElMessageBox.confirm('是否确认开始投票?', '温馨提示', {
    type: 'warning',
  }).then(() => {
    http({
      url: '/meet/vote/start',
      method: 'POST',
      data: {
        voteId: row.id,
      },
    }).then(() => {
      ElMessage.success('操作成功')
      pageActions.getData()
    })
  })
}

const base = import.meta.env.VITE_APP_BASE

const copyLink = (e, row) => {
  const clipboard = new Clipboard(e.target, {
    text: () => {
      return `${location.origin + base}/board?meetId=${row.meetId}&voteId=${row.id}&roomId=${route.query.roomId}`
    },
  })
  clipboard.on('success', () => {
    ElMessage.success('复制成功')
    clipboard.destroy()
  })
  clipboard.on('error', () => {
    ElMessage.error('复制失败')
    clipboard.destroy()
  })
  clipboard.onClick({ currentTarget: e.target })
}
</script>
